<template>
    <div>
      <!-- Go to www.addthis.com/dashboard to customize your tools -->
       <div class="addthis_inline_share_toolbox"></div>
        <!-- <social-sharing :url="shareUrl"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
    		<el-row  type="flex" class="cp-share">
    	        <el-col :span="3"><div class="grid-content"><network network="twitter"> <a class="fa twitter"></a><span class="span-txt">{{$t('product.noCoupons.share1')}}</span></network></div></el-col>
    	        <el-col :span="3"><div class="grid-content"><network network="facebook"> <a class="fa facebook" data-cmd="fbook"></a></network><span class="span-txt">{{$t('product.noCoupons.share2')}}</span></div></el-col>
    	        <el-col :span="3"><div class="grid-content"><network network="linkedin"> <a class="fa instagram"></a></network><span class="span-txt">{{$t('product.noCoupons.share3')}}</span></div></el-col>
    	        <el-col :span="3"><div class="grid-content"><network network="reddit"> <a class="fa snapchat"></a></network><span style="padding-top: 6px;">{{$t('product.noCoupons.share4')}}</span></div></el-col>
    	        <el-col :span="3"><div class="grid-content"><a class="fa wechat" data-cmd="weixin"></a><span class="span-txt">{{$t('product.noCoupons.share5')}}</span></div></el-col>
    	        <el-col :span="3"><div class="grid-content"><a class="link" data-label="link" @click="$parent.showMgmDialog"></a><span class="span-txt">{{$t('product.noCoupons.share6')}}</span></div></el-col>
    	        <el-col :span="3"><div class="grid-content"><a class="qrcode" data-label="code" @click="$parent.showMgmDialog"></a><span class="span-txt">{{$t('product.noCoupons.share7')}}</span></div></el-col>
    	        <el-col :span="3"><div class="grid-content"><network network="email"> <a class="fa email" data-cmd="mail"></a></network><span  class="span-txt" style="display:block">{{$t('product.noCoupons.share8')}}</span></div></el-col>
    	    </el-row>
        </social-sharing> -->
		<!-- <el-dialog
          :visible.sync="mgmDialogVisible"
          width="400px"
          center>
          <div style="margin-top: 15px;">
              <el-input v-model="currentLabel" class="input-with-select">
                <el-button slot="append" v-clipboard:copy='currentLabel' v-clipboard:success='clipboardSuccess'>copy</el-button>
              </el-input>
            </div>
        </el-dialog> -->
	</div>
    
</template>

<script>
    // import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
	import { mapGetters } from 'vuex'
    import Cookies from 'js-cookie'
    // var SocialSharing = require('vue-social-sharing');

    const SHARE_URL = "https://" + window.location.host + window.location.pathname + "?code=" + Cookies.get('uc') + "#/mgm" 
    window.addthis_share = {
       url: SHARE_URL,
       title: "Come2Try",
       description: "To easily buy your favorite products from Amazon FOR FREE.",
       media: 'http://pic.caigoubao.cc/602203/logo.png'
    }
const appendJS = function (src) {
        let js = document.createElement('script');
        js.type = 'text/javascript';
        js.src = src;
        js.async = false;
        document
            .getElementsByTagName('head')[0]
            .appendChild(js);
    };

    export default {
        // components: { SocialSharing },
      //   directives: {
      //   clipboard
      // },
        data() {
            return {
                testShow: true,
                shareUrl: SHARE_URL,
                mgmDialogVisible: false,
                currentLabel: 'code' //当前点击的是哪种分享方式
            }
        },
        computed: {
            ...mapGetters([
              'userCode'
            ])
        },
        methods: {
            showMgmDialog: function (o) {
                let label = o.target.dataset.label;
                if (label == 'code') {
                    this.currentLabel = Cookies.get('uc')
                } else if (label == 'link') {
                    this.currentLabel = SHARE_URL
                } 
                this.mgmDialogVisible = true
            },
            clipboardSuccess: function () {
                this.$message({
                    message: 'copy success!',
                    type: 'success',
                    duration: 1500
                  })
            }
        },
        created() {
            // $('meta[name=facebooknamesp]').attr("content","http://www.come2try.com/index.html#/mgm?code=qqq")
            // alert(9)
            // $('.dialog-coupon li').click(() => {
            // 	$(this).addClass('active');
            // })
        },
        mounted() {
                    setTimeout(() => {
                        this.testShow=true
                    },5000)
            // appendJS('//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5ae549a2bfdf4cf8')
        }
    }
</script>

<style>
    .cp-share {
        width: 580px;
        margin: 0 auto !important;
    }
    .cp-share span {
        display: inline-block;
        font-size: 12px;
        color: #030303;
    }
    .cp-share .span-txt {
         padding-top: 10px;
    }
    .cp-share .grid-content a {
        margin: 0 auto;
        cursor: pointer;
        display: block;
    }
    .twitter {
        width: 36px;
        height: 36px;
        background: url("../../../../assets/icons/i-twitter.png") no-repeat center;
        background-size: contain;
    }
    .email {
        width: 36px;
        height: 36px;
        background: url("../../../../assets/icons/email.png") no-repeat center;
        background-size: contain;
    }
    .facebook {
        width: 36px;
        height: 36px;
        background: url("../../../../assets/icons/facebook.png") no-repeat center;
        background-size: contain;
    }
    .instagram {
        width: 36px;
        height: 36px;
        background: url("https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7742135c292665445c3f5f6053f4942a_121_121.jpg") no-repeat center;
        background-size: contain;
    }
    .link {
        width: 36px;
        height: 36px;
        background: url("../../../../assets/icons/link.png") no-repeat center;
        background-size: contain;
    }
    .qrcode {
        width: 36px;
        height: 36px;
        background: url("../../../../assets/icons/qrcode.png") no-repeat center;
        background-size: contain;
    }
    .snapchat {
        width: 40px;
        height: 40px;
        background: url("../../../../assets/icons/reddit.jpeg") no-repeat center;
        background-size: contain;
    }
    .wechat {
        width: 36px;
        height: 36px;
        background: url("../../../../assets/icons/wechat.png") no-repeat center;
        background-size: contain;
    }
    .bdshare-button-style0-16 a, .bdshare-button-style0-16 .bds_more {
        float: none;
        padding: 0;
        display: block;
        background-position: 0 0;
    }
</style>
